<template>
  <div class="description">
  </div>
  <ul class="svg_list">
    <li>
      <div class="tit">Stroke 属性</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none">
          <path stroke="red" d="M5 20 l215 0" />
          <path stroke="blue" d="M5 40 l215 0" />
          <path stroke="black" d="M5 60 l215 0" />
        </g>
      </svg>
    </li>
    <li>
      <div class="tit">stroke-width 属性</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black">
          <path stroke-width="2" d="M5 20 l215 0" />
          <path stroke-width="4" d="M5 40 l215 0" />
          <path stroke-width="6" d="M5 60 l215 0" />
        </g>
      </svg>
    </li>
    <li>
      <div class="tit">stroke-linecap 属性</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="6">
          <path stroke-linecap="butt" d="M5 20 l215 0" />
          <path stroke-linecap="round" d="M5 40 l215 0" />
          <path stroke-linecap="square" d="M5 60 l215 0" />
        </g>
      </svg>
    </li>
    <li>
      <div class="tit">stroke-dasharray 属性</div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g fill="none" stroke="black" stroke-width="4">
          <path stroke-dasharray="5,5" d="M5 20 l215 0" />
          <path stroke-dasharray="10,10" d="M5 40 l215 0" />
          <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
        </g>
      </svg>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";

const value = ref("asd");
const content3d = ref<HTMLElement>();

onMounted(() => {

});
</script>

<style lang="scss" scoped>
.svg_list {
  display: flex;
  justify-content: space-between;
  widows: 100%;
  flex-wrap: wrap;

  li {
    .tit {
      text-align: center;
      border: 1px dashed #ddd;
      width: 100%;
      height: 30px;
      line-height: 30px;
      box-sizing: border-box;
    }

    width: 300px;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    &.larger {
      width: 500px;
    }
  }
}
</style>
